<template>
  <div>
    <el-divider content-position="center">个人信息</el-divider>
    <el-descriptions class="margin-top" title="个人信息" :column="3" :size="size" border>
      <template slot="extra">
        <el-button @click="updatePwdTwo" type="primary" size="small">二级密码</el-button>
        <el-button @click="updatePwd" type="warning" size="small">修改密码</el-button>
      </template>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          用户名
        </template>
        {{boss.bname}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          账号
        </template>
        {{boss.baccount}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          备注
        </template>
        <el-tag size="small">Boss</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          联系地址
        </template>
        xx省xx市xx区xx号
      </el-descriptions-item>
    </el-descriptions>

    <el-drawer
        title="修改密码"
        :visible.sync="dialog"
        direction="ltr"
        custom-class="demo-drawer"
        ref="drawer"
    >
      <div class="demo-drawer__content">
        <el-form :model="form">
          <el-form-item label="旧密码" :label-width="formLabelWidth">
            <el-input v-model="form.oldPwd" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="新密码" :label-width="formLabelWidth">
            <el-input v-model="form.newPwd" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" @click="submitForm('pwd')">确 定</el-button>
        </div>
      </div>
    </el-drawer>

    <el-drawer
        title="修改二级密码"
        :visible.sync="dialog2"
        direction="ltr"
        custom-class="demo-drawer"
        ref="drawer"
    >
      <div class="demo-drawer__content">
        <el-form :model="form">
          <el-form-item label="旧密码" :label-width="formLabelWidth">
            <el-input v-model="form.oldPwd" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="二级密码" :label-width="formLabelWidth">
            <el-input v-model="form.newPwd" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" @click="submitForm('pwd2')">确 定</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "ProductureMessage",
  data(){
    return{
      size: '',
      boss:'',
      dialog: false,
      dialog2: false,
      form: {
        oldPwd: '',
        newPwd: ''
      },
      formLabelWidth: '80px',
    }
  },
  methods:{
    updatePwdTwo(){
      this.dialog2 = !this.dialog2
    },
    updatePwd(){
      this.dialog = !this.dialog
    },
    cancelForm() {
      this.dialog = false;
      this.dialog2 = false;
    },
    submitForm(flag){
      let boss = JSON.parse(sessionStorage.getItem("boss"))
      if (flag === 'pwd'){
        axios({
          method:'post',
          url:`http://localhost:8081/boss/updatePwd/${boss.bid}`,
          data:{
            key:this.form.oldPwd,
            value:this.form.newPwd
          }
        }).then(res=>{
          if (res.data.code === 0){
            this.$notify({
              title: '成功',
              message: res.data.msg,
              type: 'success'
            });
            this.dialog = !this.dialog
            this.form.newPwd = ''
            this.form.oldPwd = ''
          }else{
            this.$notify.error({
              title: '错误',
              message: res.data.msg
            });
          }
        }).catch(err=>{
          console.log(err)
        })
      }else{
        axios({
          method:'post',
          url:`http://localhost:8081/boss/updatePwd2/${boss.bid}`,
          data:{
            key:this.form.oldPwd,
            value:this.form.newPwd
          }
        }).then(res=>{
          if (res.data.code === 0){
            this.$notify({
              title: '成功',
              message: res.data.msg,
              type: 'success'
            });
            this.dialog2 = !this.dialog2
            this.form.newPwd = ''
            this.form.oldPwd = ''
          }else{
            this.$notify.error({
              title: '错误',
              message: res.data.msg
            });
          }
        }).catch(err=>{
          console.log(err)
        })
      }
    }
  },
  mounted() {
    let boss = JSON.parse(sessionStorage.getItem("boss"))
    axios({
      method:'get',
      url:`http://localhost:8081/boss/getBoss/${boss.bid}`
    }).then(res=>{
      console.log(res)
      this.boss = res.data.data
    }).catch(err=>{
      console.log(err)
    })
  }
}
</script>

<style scoped>

</style>
